<template>
  <page-meta>
    <navigation-bar
      title="我的"
      title-align="center"
      background-color="#5896f5"
    />
  </page-meta>
  <view>
    <!-- 未登录时显示 -->
    <view v-if="$store.state.user.userInfo == null" class="head_view">
      <view class="view_box">
        <button
          class="btn_login"
          size="mini"
          :plain="true"
          @click="click_login"
        >
          立即登录/注册
        </button>
      </view>
      <view>
        <text class="text_hint">您还没有登录哟，立即登录查看更多内容~</text>
      </view>
    </view>
    <!-- 登录后显示 -->
    <view v-if="$store.state.user.userInfo != null" class="head_view">
      <view class="view_box">
        <image
          class="image_head"
          :src="$store.state.user.userInfo.avatarUrl"
          @click="clickAvatar"
        />
      </view>
      <view class="view_box">
        <text class="text_user">{{ $store.state.user.userInfo.nickName }}</text>
      </view>
    </view>
    <view class="view_pluins">
      <view class="view_pluin">
        <image class="image_icon" src="/static/myself/money.png" />
        <view>
          <text class="text_content">积分</text>
          <text
            v-if="$store.state.user.userInfo != null"
            class="text_content"
          >
            {{ $store.state.user.userInfo.scores }}
          </text>
        </view>
      </view>
      <view class="view_pluin" @click="signInClick">
        <image class="image_icon" src="/static/myself/sign.png" />
        <view>
          <text class="text_content">签到</text>
        </view>
      </view>
    </view>
	
    <uni-list :border="true">
      <uni-list-item
        v-for="item in itemlist"
        :key="item.title"
        :title="item.title"
        :thumb="item.avatar"
        :show-badge="item.badgeNumber !== ''"
        :badge-text="item.badgeNumber"
        :show-arrow="true"
        :clickable="true"
        thumb-size="sm"
        @click="clickItem(item.id)"
      />
    </uni-list>
	
    <!-- 底层填充盒子 用于防止tabbar遮挡 -->
    <!-- #ifdef MP-WEIXIN -->
    <view style="height:10px" />
    <!-- #endif -->
    <!-- #ifdef H5 -->
    <view style="height:60px" />
    <!-- #endif -->
  </view>
</template>

<script>
import { login } from '@/common/api/user.js'
import { signIn } from '@/common/api/index.js'
import { getNewSocket } from '@/common/msgListener.js'
export default {
  data() {
    return {
      itemlist: [{
        id: 1,
        title: '访客',
        avatar: '/static/myself/visit.png',
        badgeNumber: ''
      }, {
        id: 2,
        title: '收藏',
        avatar: '/static/myself/collect.png'
      }, {
        id: 3,
        title: '点赞', 
        avatar: '/static/myself/like.png'
      }, {
        id: 4,
        title: '设置',
        avatar: '/static/myself/setting.png'
      }, {
        id: 5,
        title: '意见反馈',
        avatar: '/static/myself/opinion.png'
      }, {
        id: 6,
        title: '关于',
        avatar: '/static/myself/about.png',
        clickable: true
      }],
      hasSignIn: false
    }
  },
  methods: {
    // 点击登录
    click_login() {
      var _this = this
      // 如果还没登录
      if (this.$store.state.user.userInfo == null) {
        login()
          .then(res => {
            console.log(res)
            // 登录成功后 保存用户信息
            this.$store.commit('updateUserInfo', res)
            // 如果是第一次注册或者没有完善数据 需要个人详情
            if (res.loginType === 0) {		// 如果是新注册用户
              // 跳转到个人详情页
              uni.navigateTo({
                url: '/pages/myself/userInfo/index'
              })
            } else {
              // 显示登录成功
              uni.showToast({
                title: '登录成功！'
              })
              // 取出本地缓存的消息数据
              uni.getStorage({
                key: 'messageList&' + res.uid,
                success: function(res) {
                  console.log('取出历史消息记录', res.data)
                  _this.$store.commit('setMessageList', res.data)
                },
                fail() {}
              })
              // 连接服务器获取消息
              this.connectWebSocket(res.uid)
            }
          })
      }
    },
    // 连接服务器webSocket
    connectWebSocket(uid) {
      getNewSocket(uid).connectSocketInit()
      // 接收数据
      uni.$on('getWebSocketMessage', (res) => {
        this.$store.commit('addNewMessage', res.data)
        // 将数据持久化
        uni.setStorage({
          data: this.$store.state.message.messageList,
          key: 'messageList&' + uid
        })
      })
    },
    // 签到
    signInClick() {
      if (this.$store.state.user.userInfo === null) {
        uni.showToast({
          title: '请先进行登录哦~',
          icon: 'none'
        })
        return
      }

      if (this.hasSignIn) {
        uni.showToast({
          title: '您今天已签到，请勿重复签到',
          icon: 'none'
        })
        return
      }

      // console.log(this.$store.state.user.userInfo.uid)
      signIn(this.$store.state.user.userInfo.uid)
        .then(res => {
          this.$store.state.user.userInfo.scores += res
          this.setHasSignIn()
          uni.showToast({
            title: '签到成功积分+' + res,
            icon: 'none' 
          })
        })
        .catch(err => {
          if (typeof (err) === 'string') {
            this.setHasSignIn()
          }
        })
    },
    setHasSignIn() {
      this.hasSignIn = true
      // 1分钟以后解除签到限制 防止多次请求
      setTimeout(() => {
        this.hasSignIn = false
      }, 60000)
    },
    // 点击列表项目
    clickItem(id) {
      switch (id) {
        case 6:
          uni.showModal({
            title: '关于开发者',
            content: '开发者:李卓一，QQ:1193765249',
            confirmText: '牛逼',
            cancelText: '牛逼'
          })
          break

        default:
          uni.showToast({
            title: '该功能暂未实现.',
            icon: 'none'
          })
          break
      }
    },
    // 点击头像
    clickAvatar() {
      uni.navigateTo({
        url: '/pages/myself/userInfo/index'
      })
    }
  },
  onShow() {
    if (this.$store.state.user.userInfo === null) {
      uni.showToast({
        title: '请先进行登录哦~',
        icon: 'none'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
	.mtp-5{
		margin-top: 25px;
	}
	.head_view{
		background: #5896f5;
		height: 130px;
		width: 100%;
		text-align: center;
	}
	.view_box{
		height: 70px;
		display: flex;
		.text_user{
			font-size: 15px;
			color: #fff;
			margin: auto;
			padding-bottom: 15px;
		}
		.image_head{
			width: 70px;
			height: 70px;
			margin: auto;
			border-radius: 70px;
		}
		.btn_login{
			border-width: 1px;
			border-color: #fff;
			color: #fff;
			margin: auto;
		}
	}
	.text_hint{
		font-size: 14px;
		color: #fff;
	}
	.view_pluins{
		height: 80px;
		display: flex;
		.view_pluin{
			flex: 1;
			text-align: center;
			margin: auto;
			.image_icon{
				width: 20px;
				height: 20px;
			}
			.text_content{
				font-size: 12px;
			}
		}
	}
</style>
